//  配置axios实例？

 import axios from 'axios'


// element ui被挂载在了vue实例上，但是这是一个js文件
// 并不是vue实例对象的组件，我想要使用element ui中提供的
// api: this.$message，用来弹出错误消息提示的，那么因为
// 这不是vue实例的组件，所以无法直接使用this.$message这个api
//  自己进行判断，element ui 上有哪些api，找到和this.$message
//  这个api相似的进行实验, 然后解构出来使用即可
//  import aa ,{ MessageBox } from 'element-ui';

//  console.log(aa);


import {MessageBox,Message,Loading} from 'element-ui'
// 引入element ui中的加载动画


// 引入进度条插件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

 import storage from '@/api/storage'


//  创建新的axios实例对象
let http = axios.create({
    baseURL:'/api',
    timeout:5000,  // 超时设置
    withCredentials:true    // 携带本地凭据
})


 // 设定变量用来保存动画
 let isloading = null;

// 全局的请求拦截器  对接口 的请求批量进行统一处理
http.interceptors.request.use(config => {

    // 当发起请求时，打开进度条
    NProgress.start()

 

 
//  console.log(config);
//  config就是所有配置的请求
//  如果是三个登录请求(它们的url中包含login或者wechatLogin)，那么就设定动画
if(config.url.indexOf('login') !==-1 || config.url.indexOf('wechatLogin') !==-1){
    isloading = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
}

    
   

    // 鉴权，普通员工或是管理员
    let token = JSON.parse(localStorage.getItem('qf-token'))
    config.headers.authorization = token


    // config是所有的请求配置
    return config // 放行， 如果不return  那么不能将请求发送出去
})
//  全局响应拦截 统一对错误进行处理
http.interceptors.response.use(config => {

    // 当已经响应了，关闭进度条
    NProgress.done()

    if(isloading){
        // 已经响应了，关闭加载动画
        isloading.close()
    }

    
    let {state,msg,code} = config.data

    // 10022 1004 这两个状态码分别对应了token过期和session过期
    // 10026：没有权限
    // 清掉本地缓存，清掉token

    if(code === '10022' || code === '1004'){
        // Message属性是从element ui 上解构出来的
        Message.error('登入过期，请重新登入')
        storage.rm('qf-token')
        location.reload()
    }




    if(!state){
        // 后台返回了错误的结果
        MessageBox({
            message:msg,
            title:"错误提示",
            type:'error'
        })

    }
    return config // 如果不return  axios请求就拿不到响应结果
})




export default http // 将axios实例对象导出，有了实例对象就可以使用  实例对象.get    实例对象.post等方法